<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/nav3.css">
    <style>
        html,body{
            height:100%;
        }
        *{
            padding:0;
            margin:0;
        }
        a{
            text-decoration:none;
        }
        .box{
            width:100px;
            /*加上这是横着排的导航*/
            float:left;
            margin-left:1px;
        }
        .tit1,.tit2,a{
            height:40px;
            width:100px;
            color:white;
            line-height:40px;
            text-align:center;
        }
        .tit1{
            background:black;
            font-size:18px;
        }
        .tit1:hover{
            background:orange;
            color:black;
            font-size:18px;
        }
        .box:hover .tit2{
            display:block;
        }
        .tit2{
            background:blue;
            display:none;
            position:relative;
        }
        .tit2:hover{
            background:cyan;
            color:black;
            font-size:18px;
        }
        .tit2:hover a{
            display:block;
        }
        .tit3{
            position:absolute;
            left:100px;
            top:0;
        }
        a{
            background:green;
            display:none;
            font-size:16px;
        }
        a:hover{
            background:purple;
            color:white;
            font-size:18px;
        }
 
    </style>
</head>
<body>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
</body>
</html>
 